<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遍历</title>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<script>
			/* 
				jQuery默认自带隐式迭代功能,即无论获取单个对象还是多个对象,都可以使用
				函数来直接操作,这就和JS有很大的区别.
				当然如果需要显式迭代,jquery也有自己的方式
			 */
			$(function() {
				//jQuery迭代方式,i表示迭代的下标,elt表示迭代的每个元素对象
				$("p").each(function(i, e) {
					if (i == 3) {
						e.remove();
					}
				});

				//动态渲染下拉菜单的选项
				var levels = ["A", "B", "C", "D"];
				//数组迭代
				/* $.each(levels, function(i, e) {
					$("#scoreLevel").append("<option value='" + i + "'>" + e + "</option>");
				}); */
				
				//把JS数组对象转换成jQuery对象
				$(levels).each(function(i,e){
					$("#scoreLevel").append("<option value='" + i + "'>" + e + "</option>");
				});
			});
		</script>

	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>

		<select id="scoreLevel">
			<option>--成绩等级--</option>
		</select>
	</body>
</html>
